import React from 'react'
import { ListRawState } from '../../views/home'
import { Radio } from 'react-vant'

export function sell(num: number) {
  if (num > 10000) {
    return (num / 10000).toFixed(1) + '万'
  } else {
    return num
  }
}

interface PropsType {
  // 渲染数据
  v: ListRawState
  // 点击事件
  onClick?: () => void
  // 是否显示图片
  hiddenImage?: boolean
  // 外层行内样式
  style?: React.CSSProperties
  // 描述
  desc?: JSX.Element
  // 左侧前置区域
  preFix?: JSX.Element
}

const ListItem: React.FC<PropsType> = ({ v, onClick, hiddenImage, style, desc, preFix }) => {
  return <dl style={style} className='list-item' onClick={() => onClick && onClick()}>
    { preFix }
    <dt style={{ display: hiddenImage ? 'none' : 'block' }}>
      <img src={v.image[0]} alt="" />
    </dt>
    <dd>
      <h3>{v.title}</h3>
      <div className="desc">{desc ? desc : v.desc}</div>
      <div className='btm'>
        <div className="price">¥：{v.price}元</div>
        <div className="sell">销售：{sell(v.sell)}</div>
      </div>
    </dd>
  </dl>

}

export default ListItem